<script lang="ts" setup>
import { ref } from "vue";
import { Api } from "@/apis";
import { DiscoverSubtotalDataType } from "@/typing";
import { useRouter } from 'vue-router'
import { homeStoriesStore } from "@/store/index";

const store = homeStoriesStore();
const { updateIsDiscoverShow } = store;

const router = useRouter()

const subtotalLeft = ref<Array<DiscoverSubtotalDataType>>([]);
const subtotalRight = ref<Array<DiscoverSubtotalDataType>>([]);
let subtotalId = ref<number>(0);
const loading = ref(false);
const finished = ref(false);

render(0);
async function render(id: number) {
    const { data } = await Api.getDiscoverSubtotal(id);
    let arr = data.data.list;
    
    arr.forEach((item, i) => {
        if (i === 0) {
            subtotalId.value = Number(item.id) + 20;
        }
        if (i % 2 === 0) {
            subtotalLeft.value = [...subtotalLeft.value, item]
        }
        if (i % 2 !== 0) {
            subtotalRight.value = [...subtotalRight.value, item]
        }
    })
}

const onLoad = () => {
    setTimeout(() => {
        render(subtotalId.value);
        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (subtotalLeft.value.length >= 50) {
            finished.value = true;
        }
    }, 2000)
};

function changeDate(date: string) {
    let str = date.replaceAll('-', ".");
    return str.substring(0, 11);
}

function goToDiscoverImg(url: string) {
    updateIsDiscoverShow(true);
    router.push({
        name: 'discover-img',
        query: { url }
    })
}
</script>

<template>
    <div class="px-8 pt-5  bg-gray-50 pb-32">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="flex">
                <div class="subtotal-img mr-8">
                    <div v-for="(l, i) in subtotalLeft" :key="i" class="mb-8 pb-5 shadow rounded-2xl"
                        @click="goToDiscoverImg(l.picture)">
                        <img class=" rounded-t-2xl" :src="l.img_url_thumb" alt="img">

                        <div class="px-4 text-gray-400">
                            <div v-html="l.content" class="my-5 subtotal-content text-black"> </div>
                            <div>{{ l.user.user_name }}</div>
                            <div class="flex mt-2">
                                <div>{{ changeDate(l.input_date) }} </div>
                                <div class="ml-3">{{ l.addr }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="subtotal-img">
                    <div v-for="(l, i) in subtotalRight" :key="i" class="mb-8 pb-5  shadow rounded-2xl"
                        @click="goToDiscoverImg(l.picture)">
                        <img class=" rounded-t-2xl" :src="l.img_url_thumb" alt="img">

                        <div class="px-4 text-gray-400">
                            <div v-html="l.content" class="my-5 subtotal-content text-black"> </div>
                            <div>{{ l.user.user_name }}</div>
                            <div class="flex mt-2">
                                <div>{{ changeDate(l.input_date) }} </div>
                                <div class="ml-3">{{ l.addr }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<style>
.subtotal-img {
    width: 50%;
}

.subtotal-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.subtotal-img img {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
}
</style>
